import React from 'react';
import 'moment/locale/zh-cn';
import u from '../common.js';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import { Button, DatePicker, Pagination, Modal, Select, Input, message, Popover } from 'antd';
import moment from 'moment';
import '../static/forDisposal.less'
const Option = Select.Option;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

class ForDisposal extends React.Component {
  constructor(propos) {
    super(propos)
    this.state = {
      content: '',
      timeValue: [],
      publishTime: '',
      endTime: '',
      list: [],
      total: null,
      currentCount: 0,
      keyId: null,
      idBlack: null,
      idWhite: null,
      visible: false,
      visible2: false,
      page: 1
    }
  }

  componentDidMount() {
    this.getDetail()
  }

  getDetail() {
    let currentCount = this.state.currentCount
    let keyId = localStorage.getItem('kId')
    u.waitchuzhi({
      currentCount: currentCount,
      pageSize: 10,
      // keyId: Number(keyId)
    }, data => {
      this.setState({
        list: data.list,
        total: data.total
      })
    })
  }

  onContent(e) {
    this.setState({
      content: e.target.value
    })
  }

  onSearch() {

  }

  onReset() {

  }

  showModal = (id) => {
    this.setState({
      idBlack: id,
      visible: true,
    })
  }

  showModal2 = (id) => {
    this.setState({
      idWhite: id,
      visible2: true
    })
  }

  onChangeDate = (date, dateString) => {
    if (dateString[0] === '' && dateString[1] === '') {
      this.setState({
        timeValue: ['', ''],
        publishTime: '',
        endTime: ''
      })
      return
    }
    this.setState({
      publishTime: dateString[0].split(' ')[0],
      endTime: dateString[1].split(' ')[0],
      timeValue: [moment(dateString[0]), moment(dateString[1])]
    })
  }

  changeSource() {

  }

  handleChangeSelect() {

  }

  onSetResource() {

  }

  onChangeSize = (page) => {
    let currentCount = (page - 1) * 10
    console.log(page,currentCount)
    this.setState({
      currentCount: currentCount,
      page: page
    },() =>{
      this.getDetail()
    })
  }

  handleOk = (e) => {
    console.log(999999)
    u.blackId({
      id: this.state.idBlack,
      actionUser: localStorage.getItem('username')
    }, data => {
      if (data.code == 200) {
        message.success(data.message);
      }
      this.getDetail()
    })
    this.setState({
      visible: false,
    });
  }

  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  }

  handleOk2 = (e) => {
    u.whiteId({
      id: this.state.idWhite,
      actionUser: localStorage.getItem('username')
    }, data => {
      if (data.code == 200) {
        message.success(data.message);
      }
      this.getDetail()
    })
    this.setState({
      visible2: false,
    });
  }

  handleCancel2 = (e) => {
    this.setState({
      visible2: false,
    });
  }

  onGotoCapture (id,num){
    console.log(id,num)
    const w=window.open('about:blank');
    // w.location.href = 'http://localhost:3000/#/Postbar'
    w.location.href= u.baseUrl + 'build/index.html#/Postbar'
    localStorage.setItem("ID",id)
    localStorage.setItem("NUM",num)
  }

  content(item) {
    return(
        <div className='tishiStyle'>
            {item.publish_time?<div>发布时间：{item.publish_time}</div>:''}
            {item.qq?<div>QQ：{item.qq}</div>:''}
            {item.weixinhao?<div>微信：{item.weixinhao}</div>:''}
            {item.e_mail?<div>邮箱：{item.e_mail}</div>:''}
            {item.phone?<div>电话号码：{item.phone}</div>:''}
        </div>
    )
  }

  render() {
    return (
      <div className="forDisposal">
        <Modal title="判黑" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
          <p>确定判黑吗？</p>
        </Modal>

        <Modal title="判白" visible={this.state.visible2} onOk={this.handleOk2} onCancel={this.handleCancel2}>
          <p>确定判白吗？</p>
        </Modal>
        {/* <div className='bigbox'>
          <div className='bigbox-top'>
            <ul>
              <li>
                <span>精确查询:</span>
                <input type="text" ref='jingque' onChange={(e) => { this.onContent(e) }} />
              </li>
              <li>
                <span>选择时间：</span>
                <RangePicker
                  locale={locale}
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm"
                  placeholder={['开始日期', '结束日期']}
                  value={this.state.timeValue}
                  onChange={this.onChangeDate}
                  onOk={this.onOkDate}
                />
              </li>
              <li>
                <Button className="" type="primary" onClick={() => { this.onSearch() }}>查询</Button>
                <Button className="" onClick={() => { this.onReset() }}>重 置</Button>
              </li>
            </ul>
          </div>
        </div> */}

        <div className="searchNum">
          共搜索到<span>{this.state.total}</span>条数据
        </div>
        <table className='table_list'>
          <thead>
            <tr className="activee">
              <td><div className="numStyle">编号</div></td>
              <td><div className="contentStyle">疑似有害信息</div></td>
              <td><div className="source">
                来源
                {/* <Select style={{ width: 100 }} value='来源' onChange={this.changeSource.bind(this)}>
                  <Option value="all">全部</Option>
                  <Option value="website">重点网站</Option>
                  <Option value="searchEngine">搜索引擎</Option>
                  <Option value="circleFriends">朋友圈</Option>
                </Select> */}
                </div>
              </td>
              <td><div className="website">网址</div></td>
              <td><div className="mesStyle">抓取信息</div></td>
              <td><div className="methStyle">处置方式</div></td>
            </tr>
          </thead>
          <tbody>
            {
              this.state.list.map((el, index) => {
                return (
                  <tr key={index}>
                    <td><div className="numStyle">{ ((this.state.page -1 ) * 10) + index + 1 }</div></td>
                    <td><div className="contentStyle" style={{cursor: 'pointer'}} onClick={this.onGotoCapture.bind(this,el.id,2)}>
                      <Popover content={this.content(el)} title={el.account_nickname} trigger="hover">
                          {el.description?el.description:el.content}
                      </Popover>
                    </div></td>
                    <td><div className="source">{el.source}</div></td>
                    <td><div className="website"><a href={el.account_url} target="_blank">{el.account_url}</a></div></td>
                    <td><div className="mesStyle">{(el.qq ? 'QQ：' + el.qq + ' ' : '') + (el.weixinhao ? '微信：' + el.weixinhao + ' ' : '') + (el.phone ? '手机号码：' + el.phone + ' ' : '') + (el.e_mail ? '邮箱：' + el.e_mail + ' ' : '') + (el.domain ? '域名：' + el.domain + ' ' : '')}</div></td>
                    <td>
                      <div className="methStyle">
                        <Button className='look' onClick={() => { this.showModal(el.id) }}>判黑</Button>
                        <Button className='delete' onClick={() => { this.showModal2(el.id) }}>判白</Button>
                      </div>
                    </td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
        {
           this.state.total === 0 ? <div className='noDate'>当前数据已处理完毕！</div>: ''
        }
            
        {
          this.state.total !== 0 ?
          <div className="fengYe">
            <Pagination onChange={this.onChangeSize} defaultCurrent={1} total={this.props.total ? this.props.total - 1 : this.state.total - 1} />
          </div>:''
        }
      </div>
    )
  }
}

export default ForDisposal